    <style include="cr-shared-style settings-shared iron-flex passwords-shared">
      #savedPasswordsHeaders {
        /* This adds enough padding so that the labels are aligned with the
         * columns. It is necessary due to the absence of the "more actions"
         * button in the heading.
         */
        padding-inline-end: calc(
          var(--cr-icon-ripple-size) + var(--cr-icon-button-margin-start));
      }

      #exportImportMenuButton {
        /* This aligns options icons in the header row and in item rows. */
        margin-inline-end: 0;
      }

      #checkPasswordsBannerContainer {
        line-height: 0;
        padding-top: 16px;
      }

      #banner {
        border-radius: 4px;
        width: 100%;
      }

      #checkPasswordsLinkRow iron-icon {
        --iron-icon-fill-color: var(--google-red-600);
        background: radial-gradient(circle 12px at 12px,
            rgb(252, 232, 230) 100%, transparent 100%);
        height: 16px;
        margin-inline-end: 16px;
        margin-inline-start: -4px;
        padding-bottom: 4px;
        padding-inline-end: 4px;
        padding-inline-start: 4px;
        padding-top: 4px;
        width: 16px;
      }

      @media (prefers-color-scheme: dark) {
        #checkPasswordsLinkRow iron-icon {
          --iron-icon-fill-color: var(--google-red-300);
          background: radial-gradient(circle 12px at 12px,
                                    var(--google-grey-900) 100%,
                                    transparent 100%);
        }
      }

      #profileIcon {
        flex-shrink: 0;
        height: 40px;
        margin-inline-end: 16px;
        width: 40px;
      }

      #accountStorageOptInButtonsContainer {
        padding-bottom: 16px;
      }

      #devicePasswordsLink {
        cursor: pointer;
        padding-top: 16px;
      }

      #devicePasswordsLinkIcon {
        border-color: var(--google-grey-200);
        border-radius: 20px;
        border-style: solid;
        border-width: 1px;
        height: 17px;
        margin-inline-end: 16px;
        padding-bottom: 10px;
        padding-inline-end: 8px;
        padding-inline-start: 8px;
        padding-top: 11px;
        width: 22px;
      }
      #devicePasswordsLinkLabel {
        flex-grow: 1;
      }
   </style>
    <settings-toggle-button id="passwordToggle"
        aria-label="$i18n{passwords}" no-extension-indicator
        label="$i18n{passwordsSavePasswordsLabel}"
        pref="{{prefs.credentials_enable_service}}">
    </settings-toggle-button>
    <template is="dom-if"
        if="[[prefs.credentials_enable_service.extensionId]]">
      <div class="cr-row continuation">
        <extension-controlled-indicator class="flex"
            id="passwordsExtensionIndicator"
            extension-id="[[prefs.credentials_enable_service.extensionId]]"
            extension-name="[[
                prefs.credentials_enable_service.controlledByName]]"
            extension-can-be-disabled="[[
                prefs.credentials_enable_service.extensionCanBeDisabled]]">
        </extension-controlled-indicator>
      </div>
    </template>
    <settings-toggle-button id="autosigninCheckbox" class="hr"
        pref="{{prefs.credentials_enable_autosignin}}"
        label="$i18n{passwordsAutosigninLabel}"
        sub-label="$i18n{passwordsAutosigninDescription}">
    </settings-toggle-button>
    <div id="checkPasswordsBannerContainer" class="cr-row"
        hidden$="[[!shouldShowBanner_]]">
      <picture>
        <source
            srcset="chrome://settings/images/password_check_neutral_dark.svg"
            media="(prefers-color-scheme: dark)">
        <img id="banner" alt=""
            src="chrome://settings/images/password_check_neutral.svg">
      </picture>
    </div>
    <div id="checkPasswordsButtonRow" class="cr-row continuation"
        hidden$="[[!shouldShowBanner_]]">
      <div class="flex cr-padded-text">
        <div>$i18n{checkPasswords}</div>
        <div class="secondary">$i18n{checkPasswordsDescription}</div>
      </div>
      <cr-button id="checkPasswordsButton" class="action-button cr-button-gap"
          on-click="onCheckPasswordsClick_">
        $i18n{checkPasswords}
      </cr-button>
    </div>
    <div class="cr-row" id="checkPasswordsLinkRow"
        on-click="onCheckPasswordsClick_" actionable
        hidden$="[[shouldShowBanner_]]">
      <iron-icon icon="cr:warning" id="checkPasswordWarningIcon"
          hidden$="[[!hasLeakedCredentials_]]"></iron-icon>
      <div class="flex cr-padded-text">
        <div>
          $i18n{checkPasswords}
        </div>
        <div class="secondary" id="checkPasswordLeakCount"
            hidden$="[[!hasLeakedCredentials_]]">
          [[compromisedPasswordsCount]]
        </div>
        <div class="secondary" id="checkPasswordLeakDescription"
            hidden$="[[hasLeakedCredentials_]]">
          $i18n{checkPasswordsDescription}
        </div>
      </div>
      <cr-icon-button id="icon" class="subpage-arrow"
          aria-label="$i18n{checkPasswords}">
      </cr-icon-button>
    </div>
    <cr-link-row id="trustedVaultBanner" class="cr-row"
        label="$i18n{trustedVaultBannerLabel}" sub-label="[[
            getTrustedVaultBannerSubLabel_(trustedVaultBannerState_)]]"
        hidden$="[[shouldHideTrustedVaultBanner_(trustedVaultBannerState_)]]"
        on-click="onTrustedVaultBannerClick_" external>
    </cr-link-row>
    <div id="manageLink" class="cr-row two-line"
        hidden$="[[hidePasswordsLink_]]">
      <!-- This div lays out the link correctly, relative to the text. -->
      <div class="cr-padded-text">$i18nRaw{managePasswordsLabel}</div>
    </div>
    <div class="cr-row first">
      <h2 id="savedPasswordsHeading" class="flex">
        $i18n{savedPasswordsHeading}
      </h2>
      <template is="dom-if" if="[[showAddPasswordButton_]]">
        <cr-button id="addPasswordButton" class="header-aligned-button"
            on-click="onAddPasswordTap_">
          $i18n{add}
        </cr-button>
      </template>
      <template is="dom-if"
          if="[[showImportOrExportPasswords_(
                    hasSavedPasswords_, showImportPasswords_)]]">
        <cr-icon-button class="icon-more-vert header-aligned-button"
            id="exportImportMenuButton"
            on-click="onImportExportMenuTap_" title="$i18n{moreActions}"
            focus-type="exportImportMenuButton"
            aria-describedby="savedPasswordsHeading"></cr-icon-button>
      </template>
    </div>

    <passwords-list-handler id="passwordsListHandler"
<if expr="chromeos_ash or chromeos_lacros">
      token-request-manager="[[tokenRequestManager_]]"
</if>
      is-account-store-user="[[isAccountStoreUser_]]"
      saved-passwords="[[savedPasswords]]">
      <div slot="body" class="list-frame">
        <div hidden$="[[!eligibleForAccountStorage_]]"
            id="accountStorageButtonsContainer">
          <div class="cr-row first two-line list-item"
              id="accountStorageOptInButtonsContainer">
            <settings-avatar-icon id="profileIcon"></settings-avatar-icon>
            <div class="flex cr-padded-text">
              <div id="accountStorageOptInBody"
                  hidden$="[[isOptedInForAccountStorage_]]">
                $i18nRaw{optInAccountStorageBody}
              </div>
              <div id="accountStorageOptOutBody"
                  hidden$="[[!isOptedInForAccountStorage_]]">
                $i18nRaw{optOutAccountStorageBody}
              </div>
              <div id="accountEmail" class="secondary">[[profileEmail_]]</div>
            </div>
            <cr-button on-click="onOptIn_" id="optInToAccountStorageButton"
                hidden$="[[isOptedInForAccountStorage_]]">
              $i18n{optInAccountStorageLabel}
            </cr-button>
            <cr-button on-click="onOptOut_" id="optOutOfAccountStorageButton"
                hidden$="[[!isOptedInForAccountStorage_]]">
              $i18n{optOutAccountStorageLabel}
            </cr-button>
          </div>
          <div id="devicePasswordsLink" class="cr-row two-line list-item"
              hidden$="[[!shouldShowDevicePasswordsLink_]]"
              on-click="onDevicePasswordsLinkClicked_">
            <iron-icon id="devicePasswordsLinkIcon" icon="cr:computer">
            </iron-icon>
            <div id="devicePasswordsLinkLabel">
                $i18n{devicePasswordsLinkLabel}
            </div>
            <cr-icon-button iron-icon="cr:arrow-right"
                aria-labelledby="devicePasswordsLinkLabel"
                aria-roledescription="$i18n{subpageArrowRoleDescription}">
            </cr-icon-button>
          </div>
        </div>
        <div id="savedPasswordsHeaders" class="list-item column-header"
            hidden$="[[!hasSavedPasswords_]]" aria-hidden="true">
          <div class="website-column">$i18n{editPasswordWebsiteLabel}</div>
          <div class="username-column">
            $i18n{editPasswordUsernameLabel}
          </div>
          <div class="password-column">
            $i18n{editPasswordPasswordLabel}
          </div>
        </div>
        <div class="cr-separators list-with-header">
          <template id="passwordList" is="dom-repeat" items="[[savedPasswords]]"
              filter="[[passwordFilter_(filter)]]"
              rendered-item-count="{{shownPasswordsCount_::dom-change}}">
            <password-list-item entry="[[item]]"
<if expr="chromeos_ash or chromeos_lacros">
                token-request-manager="[[tokenRequestManager_]]"
</if>
               >
            </password-list-item>
          </template>
        </div>
        <div id="noPasswordsLabel" class="list-item"
            hidden$="[[hasSavedPasswords_]]">
          $i18n{noPasswordsFound}
        </div>
      </div>
    </passwords-list-handler>
    <cr-action-menu id="exportImportMenu" role-description="$i18n{menu}">
      <button id="menuImportPassword" class="dropdown-item"
          on-click="onImportTap_" hidden="[[!showImportPasswords_]]">
        $i18n{import}
      </button>
      <button id="menuExportPassword" class="dropdown-item"
          on-click="onExportTap_" hidden="[[!hasSavedPasswords_]]">
        $i18n{exportMenuItem}
      </button>
    </cr-action-menu>
    <template is="dom-if" if="[[showAddPasswordDialog_]]" restamp>
      <password-edit-dialog on-close="onAddPasswordDialogClosed_"
          id="addPasswordDialog" account-email="[[profileEmail_]]"
          saved-passwords="[[savedPasswords]]"
<if expr="chromeos_ash or chromeos_lacros">
          token-request-manager="[[tokenRequestManager_]]"
</if>
          is-account-store-user="[[isAccountStoreUser_]]">
      </password-edit-dialog>
    </template>
    <template is="dom-if" if="[[showPasswordsExportDialog_]]" restamp>
      <passwords-export-dialog
<if expr="chromeos_ash or chromeos_lacros">
        token-request-manager="[[tokenRequestManager_]]"
</if>
        on-passwords-export-dialog-close="onPasswordsExportDialogClosed_">
      </passwords-export-dialog>
    </template>
<if expr="chromeos_ash or chromeos_lacros">
    <template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
      <settings-password-prompt-dialog on-token-obtained="onTokenObtained_"
          on-close="onPasswordPromptClosed_">
      </settings-password-prompt-dialog>
    </template>
</if>
    <div class="cr-row first">
      <h2 class="flex">$i18n{passwordExceptionsHeading}</h2>
    </div>
    <div class="list-frame vertical-list" id="passwordExceptionsList">
      <template is="dom-repeat" items="[[passwordExceptions]]"
          filter="[[passwordExceptionFilter_(filter)]]"
          rendered-item-count="{{shownExceptionsCount_::dom-change}}">
        <div class="list-item">
          <div class="start website-column">
            <site-favicon url="[[item.urls.link]]"></site-favicon>
            <a id="exception" href="[[item.urls.link]]" target="_blank">
              [[item.urls.shown]]
            </a>
          </div>
          <cr-icon-button class="icon-clear" id="removeExceptionButton"
              on-click="onRemoveExceptionButtonTap_" tabindex$="[[tabIndex]]"
              title="$i18n{deletePasswordException}"></cr-icon-button>
        </div>
      </template>
      <div id="noExceptionsLabel" class="list-item"
          hidden$="[[hasPasswordExceptions_]]">
        $i18n{noExceptionsFound}
      </div>
    </div>
